<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 工作终端 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-date-picker class="mr10" v-model="query.time" type="date" range-separator="-" value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
        <el-input v-model="query.kw" placeholder="请输入业务经理查询" class="handle-input mr10"></el-input>
        <el-button class="mr10" type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
        <el-button class="mr10" type="warning" @click="dayTop">今日工作榜单</el-button>
      </div>
      <el-row :gutter="10" v-loading="tableLoad">
        <el-col v-if="tableData.length > 0" v-for="item in tableData" :span="6">
          <el-card class="box-card mrB">
            <el-descriptions class="margin-top" :column="3" direction="vertical">
              <template slot="title">
                {{item.userName}}
                <p class="departmentoption">( 代代网 > 一分部 > 飞虎队 )</p>
              </template>
              <el-descriptions-item label="当天总通时">
                <el-tag size="mini" type="primary">{{item.dayTime}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="当天总通次">
                <el-tag size="mini" type="warning">{{item.dayNum}} 次</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="本周通时通次">
                <el-tag size="mini" type="success">{{item.weekTime}} - {{item.weekNum}}次</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="通时通次">
                <el-button id="ck" type="text" @click="tongshiClick(item.userId)">查看详情<i class="el-icon-arrow-right"></i></el-button>
              </el-descriptions-item>
              <el-descriptions-item label="通话录音">
                <el-button id="ck" type="text" @click="recordingClick(item.userId)">查看详情<i class="el-icon-arrow-right"></i></el-button>
              </el-descriptions-item>
              <el-descriptions-item label="应用监管">
                <el-button id="ck" type="text" @click="appClick(item)">查看详情<i class="el-icon-arrow-right"></i></el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col v-if="tableData.length == 0">
          <el-empty description="暂无数据"></el-empty>
        </el-col>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                           :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange"
                           @next-click="handlePageChange"></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-drawer :visible.sync="drawer" direction="rtl" :withHeader='false' :show-close='false' size='80%' :close-on-press-escape='false'
               :destroy-on-close="true">
      <div style="padding:20px;">
        <left v-if="typeActive == '1'" :activeId='activeId' :time='query.time'></left>
        <center v-if="typeActive == '2'" :activeId='activeId' :time='query.time'></center>
        <right v-if="typeActive == '3'" :activeapp='activeapp' :time='query.time'></right>
      </div>
    </el-drawer>
    <!-- 今日工作榜单 -->
    <el-dialog title="今日工作榜单" :visible.sync="workTopFlg" width="70%">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card class="box-card">
            <el-divider>今日通话达人 Top10</el-divider>
            <el-row class="cardList" v-for="i in 10">
              <el-col class="cardListL" :span="9"><span :class="i == 1?'TopOne':i==2?'TopTwo':i==3?'TopThree':''">{{i}}. 张益达</span></el-col>
              <el-col :class="i==1?'ACEMVP cardListC':'cardListC'" :span="6">{{i==1?'通话达人':'.'}}</el-col>
              <el-col class="cardListR" :span="9"><el-tag :type="i==1?'danger':i==2?'warning':i==3?'success':'info'">204分钟142通话</el-tag></el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <el-divider>今日通话闲人 Top10</el-divider>
            <el-row class="cardList" v-for="i in 10">
              <el-col class="cardListL" :span="9"><span :class="i == 1?'TopOne':i==2?'TopTwo':i==3?'TopThree':''">{{i}}. 王德发</span></el-col>
              <el-col :class="i==1?'ACEMVP cardListC':'cardListC'" :span="6">{{i==1?'通话闲人':'.'}}</el-col>
              <el-col class="cardListR" :span="9"><el-tag :type="i==1?'danger':i==2?'warning':i==3?'success':'info'">4分钟12通话</el-tag></el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="margin-bottom:7px">
            <el-divider>本周总时长最佳</el-divider>
            <el-row class="cardList" v-for="i in 4">
              <el-col class="cardListL" :span="9"><span :class="i == 1?'TopOne':i==2?'TopTwo':i==3?'TopThree':''">{{i}}. 厚礼蟹</span></el-col>
              <el-col :class="i==1?'ACEMVP cardListC':'cardListC'" :span="6">{{i==1?'MVP':'.'}}</el-col>
              <el-col class="cardListR" :span="9"><el-tag :type="i==1?'danger':i==2?'warning':i==3?'success':'info'">2500分钟1201通话</el-tag></el-col>
            </el-row>
          </el-card>
          <el-card>
            <el-divider>本月总时长最佳</el-divider>
            <el-row class="cardList" v-for="i in 4">
              <el-col class="cardListL" :span="9"><span :class="i == 1?'TopOne':i==2?'TopTwo':i==3?'TopThree':''">{{i}}. 蟹不肉</span></el-col>
              <el-col :class="i==1?'ACEMVP cardListC':'cardListC'" :span="6">{{i==1?'MVP':'.'}}</el-col>
              <el-col class="cardListR" :span="9"><el-tag :type="i==1?'danger':i==2?'warning':i==3?'success':'info'">30230分钟872通话</el-tag></el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getTeltime } from '../../../api/index';
import left from './terminalTem/left.vue';
import center from './terminalTem/center.vue';
import right from './terminalTem/right.vue';

export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 12,
        kw: '',
        time: '',
        totalCount: 0
      },
      tableLoad: false,
      tableData: [],

      drawer: false,

      workTopFlg: false,
      typeActive: '1',
      activeId: '',
      activeapp: {},
    };
  },
  components: {
    left,
    center,
    right
  },
  created() {
    this.query.time = this.getDate();
    this.getInit();
  },
  methods: {
    //初始化数据
    getInit() {
      this.tableLoad = true;
      getTeltime({
        page: this.query.page,
        limit: this.query.limit,
        day: this.query.time ? this.query.time : this.getDate(),
        kw: this.query.kw
      }).then(res => {
        this.tableLoad = false;
        if (res.code == 0) {
          res.recordList.forEach((item, index) => {
            for (var i in item) {
              if (i.indexOf('time') > -1 || i.indexOf('Time') > -1) {
                item[i] = this.formatTime(item[i]);
              }
            }
          })
          this.query.totalCount = res.totalCount;
          this.tableData = res.recordList;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getInit();
    },
    //翻页
    handlePageChange(page) {
      this.query.page = page;
      this.getInit();
    },
    //通时通次 
    tongshiClick(id) {
      this.typeActive = '1';
      this.drawer = true;
      this.activeId = id;
    },
    //录音
    recordingClick(id) {
      this.typeActive = '2';
      this.drawer = true;
      this.activeId = id;
    },
    //应用监管
    appClick(item) {
      this.typeActive = '3';
      this.drawer = true;
      var obj = {
        name: item.userName,
        id: item.userId
      }
      this.activeapp = obj;
    },
    //获取当天日期
    getDate() {
      let currentDate = new Date();
      let year = currentDate.getFullYear();
      let month = currentDate.getMonth() + 1;
      let day = currentDate.getDate();
      let formattedDate = year + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day);
      return formattedDate;
    },
    //时间拆分
    formatTime(seconds) {
      let hour = Math.floor(seconds / 3600);
      let minute = Math.floor((seconds % 3600) / 60);
      let second = seconds % 60;
      return `${hour} 时 ${minute} 分${second}秒`
    },
    //工作榜单
    dayTop() {
      this.workTopFlg = true;
    }
  }
};
</script>

<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.mrB {
    margin-bottom: 10px;
}
#ck {
    padding: 0 !important;
}
/deep/ :focus {
    outline: 0;
}
.cardList {
    border-bottom: 1px solid #eee;
    line-height: 50px;
}
.TopOne {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
}
.TopTwo {
    color: #e6a23c;
    font-size: 17px;
    font-weight: bold;
}
.TopThree {
    color: #67c23a;
    font-size: 16px;
    font-weight: bold;
}
.cardListR {
    text-align: right;
}
.cardListC {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.ACEMVP {
    color: #ffd700;
}
.departmentoption {
    font-size: 12px;
    color: #999;
}
</style>
